import BasemapToggle from "@arcgis/core/widgets/BasemapToggle";
import BasemapGallery from "@arcgis/core/widgets/BasemapGallery";
import Legend from "@arcgis/core/widgets/Legend";
import Expand from "@arcgis/core/widgets/Expand";
import ScaleBar from "@arcgis/core/widgets/ScaleBar";
import CoordinateConversion from "@arcgis/core/widgets/CoordinateConversion";
import { mapView, imageLayer, tiledLayer_poi } from "@/api/map";

//封装添加expand控件
const useExpand = (widgetName: any, directions: string, isExpand?: boolean) => {
  const expandName = new Expand({
    view: mapView,
    content: widgetName,
    expanded: isExpand,
  });
  mapView.ui.add(expandName, directions);
};

export const addWidgets = () => {
  //切换地图控件
  const basemapToggle = new BasemapToggle({
    view: mapView,
    label: "影像/矢量",
    icon: "bring-forward",
    nextBasemap: {
      baseLayers: [imageLayer, tiledLayer_poi],
      thumbnailUrl:
        "https://js.arcgis.com/4.27/esri/images/basemap/satellite.jpg",
    },
  });
  //画廊控件
  const basemapGallery = new BasemapGallery({
    view: mapView,
  });
  //图例控件
  const legend = new Legend({
    view: mapView,
    visible: true,
  });
  //比例尺控件
  let scaleBar = new ScaleBar({
    view: mapView,
    style: "line",
    unit: "metric",
  });
  mapView.ui.add(scaleBar, "bottom-left");
  //实时显示坐标控件
  const ccWidget = new Expand({
    content: new CoordinateConversion({
      view: mapView,
      icon: "pin-tear-f",
    }),
    view: mapView,
  });

  //切换地图控件
  useExpand(basemapToggle, "top-left");
  useExpand(basemapGallery, "top-right");
  useExpand(legend, "bottom-right", true);
  mapView.ui.add(ccWidget, "bottom-right");
};
